import React, { Component } from 'react';
import {
  Table,
  Pagination,
  Dialog,
  Button,
  Input,
  Grid,
  DatePicker,Message,
} from '@alifd/next';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import ChooseHead from '../chooseHead';
import { getLocalTime } from '../../../../utils/localTime';
import './index.scss';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;

// const groupHeaderRender = function (record) {
//   return <div>{record.product[0].title}</div>;
// };

@withRouter
export default class goodList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      isLoading: true,
      data: [],
      countPage: '', // 总页数
      perPage: 10, // 每页数据数量
      retrunList: [], // 退库列表
      filterData: {
        w_id: '',
        search: '',
        add_time: '',
      },
      Evisible: false,
      a_id: '', // 退货id
      on_stock_id: '', // 入货的库存id
      diaFormData: {
        add_time: '', // 退货日期,
        stock: '', // 退货数量
        reason: '', // 退货原因
      },
    };
  }

  // 获取退库列表
getReturnList= () => {
  service({
    method: 'get',
    url: api.ReturnList,
    params: {
      w_id: this.state.filterData.w_id || '',
      search: this.state.filterData.search || '',
      add_time: this.state.filterData.add_time || '',
      page: this.state.page || 1,
    },
  })
    .then((res) => {
     
      const data = res.data.return_list;
      data.forEach((element) => {
        element.add_time = getLocalTime(element.add_time);
      });
      this.setState(
        {
          returnList: data,
          countPage: res.data.count_page,
          isLoading: false,
        }
      );
    });
}
// 进行退货
toReturn= () => {
  service({
    method: 'get',
    url: api.PurReturn,
    params: {
      a_id: this.state.a_id,
      on_stock_id: this.state.on_stock_id,
      stock: this.state.diaFormData.stock,
      reason: this.state.diaFormData.reason,
      add_time: this.state.diaFormData.add_time,
    },
  })
    .then((res) => {
      if (res.data.code === 200) {
        Message.success('退货成功！');
        this.setState(
          {
            Evisible: false,
          }, () => {
            this.getReturnList();
          }
        );
       
      }
    });
}
componentDidMount() {
  this.getReturnList();
}

  handlePaginationChange = (current) => {
    this.setState(
      {
        page: current,
        isLoading:true,
      },
      () => {
        this.getReturnList();
      }
    );
  };

  handleFilterChange = (value) => {
    this.setState(
      {
        filterData: value,
        isLoading: true,
        page: 1,
      }, () => {
        this.getReturnList();
      }
    );
  };
  handleReturn = (index, value, record) => {
    this.setState(
      {
        Evisible: true,
        a_id: record.id,
        on_stock_id: record.on_stock_id,
      }
    );
  }
  handleReturnBtnClick= () => {
    this.toReturn();
  }
  handleReturnDiaFormChange=(value) => {
    this.setState(
      {
        diaFormData: value,
      }
    );
  }
  // 导出
  handleDownload = () => {
  
    window.location.href = `${api.ReturnList}?excel=1&w_id=${this.state.filterData.w_id}&add_time=${this.state.filterData.add_time}&search=${this.state.filterData.search}`;
  }
  renderOper = (index, value, record) => {
    return (
      <div>
        <a style={styles.link.detail} onClick={() => this.handleReturn(index, value, record)}>
          退货
        </a>
      </div>
    );
  };
  // 关闭弹窗
  onClose = () => {
    this.setState(
      {
        Evisible: false,
      }
    );
  }
  render() {
    const { isLoading, returnList, page, countPage, perPage } = this.state;

    return (
      <div style={styles.container}>
        <ChooseHead handleFilterChange={this.handleFilterChange} />
        <PageHead title="退库列表" buttonText="导出Excel" onClick={this.handleDownload} />
        <IceContainer style={{paddingBottom:'0'}}> 
          <Table loading={isLoading} dataSource={returnList} hasBorder={false}>
            {/* <Table.GroupHeader cell={groupHeaderRender} style={styles.tHead} /> */}
            <Table.Column title="单据号" dataIndex="action_number" />
            <Table.Column title="退库仓库" dataIndex="w_name" />
            <Table.Column title="退库日期" dataIndex="add_time" />
            <Table.Column title="商品条码" dataIndex="goods_bar_code" />
            <Table.Column title="品牌" dataIndex="goods_class_name" />
            <Table.Column title="商品名称" dataIndex="goods_name" />
            <Table.Column title="型号" dataIndex="model" />
            <Table.Column title="色号/膜层" dataIndex="color_layer" />
            <Table.Column title="镜片类型" dataIndex="lens_type" />
            <Table.Column title="屈光度" dataIndex="diopter" />
            <Table.Column title="散光度" dataIndex="astigmatism" />
            <Table.Column title="数量" dataIndex="stock" />
            {/* <Table.Column title="零售价" dataIndex="retail_price" /> */}
            <Table.Column title="进货价" dataIndex="buying_price" />
            {/* <Table.Column title="折扣" dataIndex="rebate" /> */}
            <Table.Column title="生产批号" dataIndex="batch_number" />
            <Table.Column title="到期日期" dataIndex="due_time" />
            <Table.Column title="操作" cell={this.renderOper} />
          </Table>
        </IceContainer>
        {/* 退货弹窗s */}
        <Dialog
          id="ReturnEDialog"
          visible={this.state.Evisible}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleReturnBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">退货信息填写</span></h3>
            <IceContainer className="dialogContent" style={{ width: '1200px' }}>
              <IceFormBinderWrapper value={this.state.diaFormData} onChange={this.handleReturnDiaFormChange}>
                <Row style={styles.row} gutter="4">
                  <Col style={styles.col} span="8">
                    <span style={styles.SelectLabel}>退货数量</span>
                    <IceFormBinder name="stock">
                      <Input size="large" placeholder="请输入退货数量" style={styles.Select} />
                    </IceFormBinder>
                  </Col>
                  <Col span="8" style={styles.col}>
                    <span style={styles.SelectLabel}>退货原因</span>
                    <IceFormBinder name="reason">
                      <Input size="large" placeholder="请输入退货原因" style={styles.Select} />
                    </IceFormBinder>
                  </Col>
                  <Col span="8" style={styles.col}>
                    <span style={styles.SelectLabel}>退库日期</span>
                    <IceFormBinder name="add_time">
                      <DatePicker size="large" style={styles.Select} />
                    </IceFormBinder>
                  </Col>
                </Row>
              </IceFormBinderWrapper>
            </IceContainer>
          </div>
        </Dialog>
        <Pagination
          style={styles.pagination}
          current={page}
          onChange={this.handlePaginationChange}
          total={perPage * countPage}
        />
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  col: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  Select: {
    width: '250px',
  },
  row: {
    marginBottom: '20px',
  },
  SelectLabel: {
    display: 'inline-block',
    minWidth: '60px',
    paddingRight: '10px',
  },
};
